<template>
  <div class="container">
    <!--    顶部用户信息展示区-->
    <div class="user-banner relative">
      <div class="absolute bottom-0 w-full h-[80px]">
        <div class="flex pl-[20px]">
          <transition
            enter-active-class="swashIn"
            leave-active-class="swashOut"
          >
            <var-image
              class="shadow-md"
              width="60px"
              height="60px"
              fit="cover"
              radius="50%"
              @click="preview"
              :src="state.featchData.photo"
            />
          </transition>
          <p class="ml-3.5 flex flex-col justify-between">
            <span class="mt-[5px] text-[#513d3d] font-bold">
              {{ state.featchData.nick_name }}
            </span>
            <span class="text-[#908d8d] text-[12px] mb-[2px]"
              >填写个人信息更容易被别人关注哦</span
            >
          </p>
        </div>
      </div>
      <var-icon
        name="cog-outline"
        @click="showDialog"
        class="absolute top-[20px] right-[20px]"
      />
    </div>
    <!--   顶部用户信息展示区 end -->

    <!--    数据内容数值展示区 start-->
    <div>
      <var-row>
        <var-col :span="6">
          <p>0</p>
          <span>粉丝</span>
        </var-col>
        <var-col :span="6">
          <p>0</p>
          <span>关注</span>
        </var-col>
        <var-col :span="6">
          <p>0</p>
          <span>赞</span>
        </var-col>
        <var-col :span="6">
          <p>0</p>
          <span>收藏</span>
        </var-col>
      </var-row>
    </div>
    <!--    数据内容数值展示区 end-->

    <!--    tabs 切换-->
    <user-tabs-cpn></user-tabs-cpn>
    <!--    tabs 切换-->
  </div>

  <common-tabbar :index="tabbarActive" />
</template>

<script setup lang="ts">
/** 引入*/
import useTabsCpn from "@/components/user-tabs-cpn/user-tabs-cpn.vue";
import { onMounted, ref, reactive, computed } from "vue";
import { getUserInfo } from "@/api/usersApi.js";
import { Snackbar, ImagePreview, StyleProvider } from "@varlet/ui";
import { useRouter } from "vue-router";
import dark from "@varlet/ui/es/themes/dark";
import useCommonhooks from "@/hooks/commonHooks/useCommonhooks";
const { documentTitle } = useCommonhooks();
/** interface 接口 */
interface userInfoFace {
  id: string;
  nick_name: string;
  password: string;
  phone: string;
  photo: string;
  like_count: number;
}
/** data数据  */
const state = reactive({
  featchData: {} as userInfoFace, // 用户信息
});
const tabbarActive = ref(4);
let currentTheme = null;
const router = useRouter();

/** methods*/
const preview = () => {
  ImagePreview(state.featchData.photo);
};
const showDialog = () => {
  router.push({
    path: "/setting",
  });
};

const toggleTheme = () => {
  currentTheme = currentTheme ? null : dark;
  StyleProvider(currentTheme);
};
/** 生命周期  */
onMounted(async () => {
  const phone = localStorage.getItem("phone");
  try {
    /** 初始化用户信息*/
    const { code, data } = await getUserInfo({ phone: phone });
    if (code == 200) {
      state.featchData = data[0];
    }
  } catch (e) {
    // Snackbar.error(e);
  }
  documentTitle("个人中心");
});
</script>

<style lang="less" scoped>
.user-banner {
  width: 100%;
  height: 210px;
  background: url("../../assets/img/user/user_banner.png") no-repeat;
  background-size: 100% 100%;
}
.var-col {
  justify-content: center;
  align-items: center;
  height: 36px;
  margin-bottom: 10px;
  text-align: center;
  background-clip: content-box;
  flex-direction: column;
  p {
    color: #513d3d;
    font-size: 17px;
    font-weight: 500;
  }
  span {
    color: #b7afaf;
    font-size: 12px;
  }
}
</style>
